<template>
	<gui-page :fullPage="true">
		<template v-slot:gBody>
			<image src="@/static/login/lg_bg.jpg" style="position: fixed;top:0px;left:0px;width:100%;height: 100%;">
			</image>
			
			<view class="gui-color-white gui-column gui-align-items-center"
				style="position: fixed;bottom: 30px;width: 100%;display: flex;justify-content: center;">
				<text class="gui-text gui-block">柳州博亚科技有限公司 提供技术支持</text>
				<text class="gui-text gui-block">柳钢域名备案号 桂ICP备17009352号</text>
			</view>

			<view class="view-center">
				<view class="content">
					<view class="">
						<view class="gui-flex gui-row" style="">
							<image src="@/static/login/logo.png" mode="widthFix"
								style="width: 300rpx;height: 300rpx;margin: 0 auto; margin-top: -35rpx"></image>
						</view>
						
						<view class="gui-flex gui-align-items-center gui-margin-top">
							<text class="page-title">修改密码</text>
						</view>
						<view class="input-group">
							<view class="input-row">
								<view class="input-label">用户名</view>
								<input v-model="info.username" type="text" disabled
									class="gui-form-input gui-border gui-bg-white input-style gui-bg-gray" 
									placeholder="请输入姓名" />
							</view>
						</view>
						
							
							<view class="input-group">
								<view class="input-row">
									<view class="input-label">密码</view>
									<view class="input-container">
										<input v-model="info.password" :type="showPassword?'password':'text'"
											class="gui-form-input gui-border gui-bg-white input-style" 
											placeholder="请设置密码（6-20位字符）" />
										<view class="password-icon">
											<text class="gui-icons gui-margin-x"
												:class="[!showPassword ? 'gui-primary-color' : 'gui-color-gray']"
												v-if="info.password.length >= 1" @click="changePwdType">&#xe609;</text>
										</view>
									</view>
								</view>
							</view>
							
							<view class="input-group">
								<view class="input-row">
									<view class="input-label">确认密码</view>
									<view class="input-container">
										<input v-model="info.confirmPassword" :type="showPassword?'password':'text'"
											class="gui-form-input gui-border gui-bg-white input-style" 
											placeholder="请确认密码" />
									</view>
								</view>
							</view>
							
							<!-- <view class="input-group">
								<view class="input-row">
									<view class="input-label">手机号</view>
									<input v-model="info.phone" type="number"
										class="gui-form-input gui-border gui-bg-white input-style" 
										placeholder="请输入手机号" />
								</view>
							</view>
							
							<view class="input-group">
								<view class="input-row">
									<view class="input-label">验证码</view>
									<view class="input-container">
										<input v-model="smsCode" type="number"
											class="gui-form-input gui-border gui-bg-white input-style code-input" 
											placeholder="请输入短信验证码" />
										<button @click="sendSmsCode" :disabled="isSending" class="sms-btn">
											{{smsButtonText}}
										</button>
									</view>
								</view>
							</view> -->
							
							<view class="button-container">
								<button @click="submitRegister" :disabled="loading"
									class="submit-button">
									<view>提交</view>
								</button>
							</view>
						</view>
						
						
						
						<!-- 返回登录 -->
						<view  style="margin-top:20rpx; text-align:center;">
							<text style="color: #F8E010; font-size: 26rpx;" @click="goToLogin">已有账号？返回登录</text>
						</view>
						
						
					</view>
				</view>
			</view>
		</template>
	</gui-page>
</template>

<script>
	import graceChecker from "@/Grace6/js/checker.js";
	import sign from "@/Grace6/js/sign.js";
	
	export default {
		data() {
			return {
				info:{
					username:'',
					old_pass:'',
					id_no:'',
					phone:'',
					password:'',
					confirmPassword:''
				},
				smsCode: '', // 短信验证码
				showPassword: true, // 是否显示密码
				is_ok: false, // 是否同意协议
				isSending: false, // 是否正在发送验证码
				countdown: 60, // 验证码倒计时
				smsButtonText: '获取验证码', // 验证码按钮文本
				timer: null, // 定时器
				factoryIdVerified: false ,// 厂牌号是否已验证,
				loading:false,
				token:''
			}
		},
		onLoad(opt) {
			this.info.username=opt.username;
			this.info.old_pass=opt.pass;
			this.token=opt.token;
		},
		methods: {
			// 验证厂牌号
			verifyFactoryId() {
				if (!this.factoryId) {
					uni.showToast({
						title: '请输入厂牌号',
						icon: 'none'
					});
					return;
				}
				
				if (!this.is_ok) {
					uni.showToast({
						title: '请阅读并勾选页面协议',
						icon: 'none'
					});
					return;
				}
				
				uni.showLoading({
					title: '验证中'
				});
				
				// 发送验证请求
				this.$boya.NPost('/app/check_lgid', {
					factoryId: this.factoryId
				}, (res) => {
					uni.hideLoading();
					this.factoryIdVerified = true;
					this.currentStep = 2;
				}, (err) => {
					uni.hideLoading();
					uni.showToast({
						title: err.msg || '厂牌号验证失败',
						icon: 'none'
					});
				});
			},
			
			// 发送短信验证码
			sendSmsCode() {
				if (this.isSending) return;
				
				// 验证手机号
				if (!this.info.phone || !/^1[3-9]\d{9}$/.test(this.info.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}
				
				this.isSending = true;
				this.countdown = 60;
				this.smsButtonText = `${this.countdown}秒后重发`;
				
				// 发送验证码请求
				this.$boya.NPost('/app/sms_code', {
					phone: this.info.phone,
					type: 'register'
				}, (res) => {
					uni.showToast({
						title: '验证码已发送',
						icon: 'success'
					});
					
					// 开始倒计时
					this.timer = setInterval(() => {
						this.countdown--;
						this.smsButtonText = `${this.countdown}秒后重发`;
						
						if (this.countdown <= 0) {
							clearInterval(this.timer);
							this.isSending = false;
							this.smsButtonText = '获取验证码';
						}
					}, 1000);
				}, (err) => {
					this.isSending = false;
					this.smsButtonText = '获取验证码';
					uni.showToast({
						title: err.msg || '发送失败，请重试',
						icon: 'none'
					});
				});
			},
			
			// 提交注册
			submitRegister() {
				// 表单验证
				// if (!this.info.nickname) {
				// 	uni.showToast({
				// 		title: '请输入姓名',
				// 		icon: 'none'
				// 	});
				// 	return;
				// }
				// if (!this.info.username) {
				// 	uni.showToast({
				// 		title: '请输入身份证号码 ',
				// 		icon: 'none'
				// 	});
				// 	return;
				// }
				
				// if (!this.info.phone || !/^1[3-9]\d{9}$/.test(this.info.phone)) {
				// 	uni.showToast({
				// 		title: '请输入正确的手机号',
				// 		icon: 'none'
				// 	});
				// 	return;
				// }
				
				// if (!this.info.password || this.info.password.length < 6) {
				// 	uni.showToast({
				// 		title: '密码长度不能少于6位',
				// 		icon: 'none'
				// 	});
				// 	return;
				// }
				
				
				
				if (this.info.password !== this.info.confirmPassword) {
					uni.showToast({
						title: '两次输入的密码不一致',
						icon: 'none'
					});
					return;
				}
				//验证密码强度,必输长度最小8位,而且包括大小写字符和数字
				let ps=this.validatePasswordStrength(this.info.password);
				if(!ps.isValid){
					uni.showToast({
						title:ps.message,
						icon:"error",
						duration:3000
					})
					return;
				}
				
				
				// if (!this.smsCode || this.smsCode.length !== 6) {
				// 	uni.showToast({
				// 		title: '请输入6位验证码',
				// 		icon: 'none'
				// 	});
				// 	return;
				// }
				
			
				
				uni.showLoading({
					title: '提交中'
				});
				let password=this.$lg.base64encode(this.info.password)
				
				// 发送注册请求
				this.loading=true;
				let self=this;
				this.$boya.NPost('/app/user_edit_pass', {
					password:password,
					username:this.info.username,
					token:this.token
				}, (res) => {
					uni.hideLoading();
					self.loading=false;
					if(res.code==200){
						uni.showToast({
							title:res.msg
						});
						uni.removeStorageSync("ld");	
						uni.removeStorageSync("password");
						setTimeout(function(){
							
							uni.reLaunch({
								url:"/pages/login/login"
							});
						},3000);
					}
				}, (err) => {
					self.loading=false;
					uni.hideLoading();
					uni.showToast({
						title: err.msg || '初始化失败，'+err.msg,
						icon: 'none'
					});
				});
			},
			
			validatePasswordStrength(password) {
			    // 检查密码长度
			    if (!password || password.length < 8) {
			        return {
			            isValid: false,
			            message: '密码长度必须大于等于8位'
			        };
			    }
			    
			    // 检查是否包含小写字母
			    if (!/[a-z]/.test(password)) {
			        return {
			            isValid: false,
			            message: '密码必须包含小写字母'
			        };
			    }
			    
			    // 检查是否包含大写字母
			    if (!/[A-Z]/.test(password)) {
			        return {
			            isValid: false,
			            message: '密码必须包含大写字母'
			        };
			    }
			    
			    // 检查是否包含数字
			    if (!/[0-9]/.test(password)) {
			        return {
			            isValid: false,
			            message: '密码必须包含数字'
			        };
			    }
			    
			    return {
			        isValid: true,
			        message: '密码强度符合要求'
			    };
			},
			
			// 返回登录页
			goToLogin() {
				uni.reLaunch({
					url:"/pages/login/login"
				})
			},
			
			// 切换密码显示
			changePwdType() {
				this.showPassword = !this.showPassword;
			},
			
			// 同意协议
			ok() {
				this.is_ok = !this.is_ok;
			},
			
			// 查看协议
			Policy(e) {
				uni.navigateTo({
					url: "/pages/login/agreement/agreement?type=" + e
				});
			}
		},
		onUnload() {
			// 清除定时器
			if (this.timer) {
				clearInterval(this.timer);
			}
		}
	}
</script>

<style scoped>
	@media screen and (min-width: 768px) {
		.view-center {
			position: fixed;
			top: 50%;
			left: 0;
			transform: translateY(-50%);
			width: 100%;
			padding: 0 10rpx;
		}
	}

	@media (max-width: 767px) {
		.view-center {
			position: fixed;
			top: 50%;
			left: 0;
			transform: translateY(-55%);
			width: 100%;
			padding: 0 10rpx;
		}
	}

	.content {
		opacity: 1;
		padding: 20rpx; 
		color: gray;
		width: 90%;
		border-radius: 70rpx;
	}
	
	.form-container {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.input-group {
		width: 100%;
		max-width: 600rpx;
		margin-bottom: 20rpx;
	}
	
	.input-row {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
	}
	
	.input-label {
		font-size: 28rpx;
		color: #FFFFFF;
		min-width: 120rpx;
		text-align: right;
		padding-right: 20rpx;
	}
	
	.input-container {
		position: relative;
		flex: 1;
		display: flex;
		align-items: center;
	}
	
	.password-icon {
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
	}
	
	.page-title {
		font-size: 36rpx;
		color: #FFFFFF;
		font-weight: bold;
		margin: 0 auto;
		margin-bottom: 30rpx;
	}
	
	.input-style {
		height: 80rpx;
		border-radius: 40rpx;
		padding-left: 20rpx;
		flex: 1;
		box-sizing: border-box;
	}
	
	.code-input {
		flex: 1;
	}
	
	.sms-btn {
		width: 32%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		background: #F3C822;
		color: #000;
		border-radius: 40rpx;
		padding: 0;
		margin-left: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.button-container {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 38rpx;
	}
	
	.submit-button {
		width: 90%;
		border-radius: 50rpx;
		background: linear-gradient(to bottom, #EEE6B3, #F3C822);
		color: #000;
	}
	
	.agreement-container {
		margin-top: 20rpx;
		color: #F3C822;
		width: 90%;
		border: 1px solid #F3C822;
		padding: 15rpx;
		border-radius: 50rpx;
		margin: 20rpx auto 0;
	}
	
	/* 步骤指示器样式 */
	.step-indicator {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 30rpx 0;
		padding: 0 20rpx;
		width: 100%;
	}
	
	.step {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #FFFFFF;
	}
	
	.step-number {
		width: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.3);
		margin-bottom: 10rpx;
	}
	
	.step-text {
		font-size: 24rpx;
	}
	
	.step-line {
		flex: 1;
		height: 2rpx;
		background-color: rgba(255, 255, 255, 0.3);
		margin: 0 10rpx;
	}
	
	.active-step .step-number {
		background-color: #F3C822;
		color: #000000;
	}
	
	.active-step .step-text {
		color: #F3C822;
	}
	
	.active-line {
		background-color: #F3C822;
	}
	
	/* 注册成功样式 */
	.register-success {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 50rpx;
		width: 100%;
	}
	
	.success-icon {
		margin-bottom: 30rpx;
	}
	
	.success-text {
		font-size: 36rpx;
		color: #FFFFFF;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	
	.success-desc {
		font-size: 28rpx;
		color: #FFFFFF;
		margin-bottom: 50rpx;
	}
</style> 